<template>
  <div class="menu_bg">
    <div class="menu">
      <div class="nav">
        <div class="nav_t">全部商品分类</div>
        <div class="leftNav">
          <ul>
            <li
              v-for="category in categoryTree"
              :key="'cat-' + category.id"
              @mouseenter="showSubMenu = category.id"
            >
              <div class="fj">
                <!-- 一级分类链接 -->
                <div class="fl" @click="goToSearchProduct(1, category.id)">
                  {{ category.name }}
                </div>
              </div>
            </li>
          </ul>

          <!-- 共享的二级/三级分类容器 -->
          <div class="zj" v-show="showSubMenu !== null">
            <div class="zj_l" v-if="currentCategory">
              <div
                class="zj_l_c"
                v-for="subCategory in currentCategory.children || []"
                :key="'sub-' + subCategory.id"
              >
                <!-- 二级分类标题 -->
                <h2 @click="goToSearchProduct(2, subCategory.id)">
                  {{ subCategory.name }}
                </h2>

                <!-- 三级分类 -->
                <span v-if="subCategory.children">
                  <span
                    v-for="(thirdCategory, index) in subCategory.children"
                    :key="'third-' + thirdCategory.id"
                  >
                    <!-- 三级分类链接 -->

                    <a
                      href="#"
                      @click.prevent="goToSearchProduct(3, thirdCategory.id)"
                      >{{ thirdCategory.name }}</a
                    >
                    <span v-if="index !== subCategory.children.length - 1"
                      >|</span
                    >
                  </span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 顶部导航 -->
      <ul class="menu_r">
        <li v-for="category in categoryTree" :key="'main-' + category.id">
          <a href="#" @click.prevent="goToSearchProduct(1, category.id)">
            {{ category.name }}
          </a>
        </li>
      </ul>
      <div class="m_ad">中秋送好礼！</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "HeaderMenu",
  data() {
    return {
      showSubMenu: null,
      categoryTree: [],
    };
  },
  computed: {
    currentCategory() {
      return this.categoryTree.find((c) => c.id === this.showSubMenu) || null;
    },
  },
  created() {
    this.fetchCategoryTree();
  },
  methods: {
    async fetchCategoryTree() {
      try {
        const res = await axios.get("/api/category/getCategoryTree");
        this.categoryTree = (res.data.categoryTree || []).map((category) => ({
          ...category,
          children: category.children || [],
        }));
      } catch (error) {
        console.error("获取分类数据失败:", error);
      }
    },
    goToSearchProduct(levelId, categoryId) {
      const query = {};
      let categoryPath = [];

      switch (levelId) {
        case 1: {
          const category1 = this.categoryTree.find((c) => c.id === categoryId);
          if (category1) {
            categoryPath = [category1.name];
          }
          query.categoryId = categoryId;
          break;
        }

        case 2: {
          for (const cat1 of this.categoryTree) {
            const cat2 = cat1.children?.find((c) => c.id === categoryId);
            if (cat2) {
              categoryPath = [cat1.name, cat2.name];
              break;
            }
          }
          query.subCategoryId = categoryId;
          break;
        }

        case 3: {
          for (const cat1 of this.categoryTree) {
            for (const cat2 of cat1.children || []) {
              const cat3 = cat2.children?.find((c) => c.id === categoryId);
              if (cat3) {
                categoryPath = [cat1.name, cat2.name, cat3.name];
                break;
              }
            }
          }
          query.thirdCategoryId = categoryId;
          break;
        }
      }
      this.$router.push({
        path: "/SearchProduct",
        query: {
          ...query,
          page: 1,
          categoryPath: JSON.stringify(categoryPath),
        },
      });
    },
  },
};
</script>

<style scoped>
/* 二级分类容器 - 设置多列网格 */
.zj_l {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 40px;
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

/* 二级分类标题样式 */
.zj_l_c h2 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #ff6700;
  font-weight: bold;
  padding-left: 5px;
  border-left: 3px solid #ff6700;
}

/* 三级分类链接样式 */
.zj_l_c a {
  color: #666;
  font-size: 13px;
  padding: 0 8px;
  text-decoration: none;
  display: inline-block;
  line-height: 24px;
}

.zj_l_c a:hover {
  color: #ff6700;
}

.zj_l_c span {
  color: #ddd;
  margin: 0 2px;
}

/* 二级菜单容器定位（关键修正） */
.zj {
  position: absolute;
  left: 200px;
  top: 0;
  width: 600px;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  display: none;
  border: 1px solid #eee;
}

.leftNav li:hover .zj {
  display: block;
}

.fj {
  color: white;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.fj:hover {
  background-color: #fafafa;
}
.fj:hover .fl {
  color: #ff6700;
}

.leftNav {
  position: relative; /* 为共享的二级菜单容器提供定位上下文 */
}

.zj {
  position: absolute;
  left: 200px;
  top: 0;
  width: 600px;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  display: none;
  border: 1px solid #eee;
  padding: 15px;
  margin-left: 10px;
}

.leftNav:hover .zj {
  display: block;
}
.fl {
  padding-left: 20px;
  color: white;
  transition: color 0.2s; /* 添加过渡效果 */
}
</style>